package com.example.exp3

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ImageGalleryTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ImageGalleryApp()
                }
            }
        }
    }
}

@Composable
fun ImageGalleryApp() {
    val imageResources = listOf(
        R.drawable.image1,
        R.drawable.image2,
        R.drawable.image3,
        R.drawable.image4
    )

    val imageDescriptions = listOf(
        "黑大帅",
        "权威！！",
        "黄色大海绵",
        "邪恶大海星"
    )

    var currentImageIndex by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFF1E1E1E)),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "世界名画",
            color = Color.White,
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(vertical = 20.dp)
        )

        // 将图片和描述放在一个Column中，使描述显示在图片正下方
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(16.dp)
                .background(Color(0xFF2D2D2D), MaterialTheme.shapes.medium),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .padding(8.dp)
            ) {
                Image(
                    painter = painterResource(id = imageResources[currentImageIndex]),
                    contentDescription = imageDescriptions[currentImageIndex],
                    modifier = Modifier.fillMaxSize()
                )
            }
            
            Text(
                text = imageDescriptions[currentImageIndex],
                color = Color.White,
                fontSize = 18.sp,
                fontWeight = FontWeight.Medium,
                // 减小垂直内边距，使文字更贴近图片
                modifier = Modifier.padding(vertical = 4.dp)
            )
        }

        Text(
            text = "${currentImageIndex + 1} / ${imageResources.size}",
            color = Color.White,
            fontSize = 18.sp,
            fontWeight = FontWeight.Medium,
            modifier = Modifier.padding(vertical = 16.dp)
        )

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 32.dp, vertical = 20.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(
                onClick = {
                    currentImageIndex = if (currentImageIndex - 1 >= 0) {
                        currentImageIndex - 1
                    } else {
                        imageResources.size - 1
                    }
                },
                colors = ButtonDefaults.buttonColors(
                    containerColor = MaterialTheme.colorScheme.primary
                ),
                modifier = Modifier.weight(0.45f)
            ) {
                Text(
                    text = "上一张",
                    fontSize = 16.sp,
                    modifier = Modifier.padding(horizontal = 8.dp)
                )
            }

            Spacer(modifier = Modifier.width(8.dp))

            Button(
                onClick = {
                    currentImageIndex = if (currentImageIndex + 1 < imageResources.size) {
                        currentImageIndex + 1
                    } else {
                        0
                    }
                },
                colors = ButtonDefaults.buttonColors(
                    containerColor = MaterialTheme.colorScheme.primary
                ),
                modifier = Modifier.weight(0.45f)
            ) {
                Text(
                    text = "下一张",
                    fontSize = 16.sp,
                    modifier = Modifier.padding(horizontal = 8.dp)
                )
            }
        }
    }
}

@Composable
fun ImageGalleryTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        content = content
    )
}